<!DOCTYPE html>
<!-- html5的文档声明 -->
<!-- 标准模式 -->
<!-- ‘去掉’文档声明会使浏览器进入怪异模式 （混杂模式）-->
<!-- 怪异模式是为了向后兼容，比如，IE7启用怪异模式，可以兼容IE6 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        console.log(window.innerWidth); // 返回数字类型，表示像素值
        console.log(window.innerHeight);

        // 标准模式下：
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.clientHeight);

        //怪异模式下：
        console.log(document.body.clientWidth);
        console.log(document.body.clientHeight);

        // 判断模式：
        console.log(document.compatMode);// 怪异模式返回 'BackCompat'
        console.log(document.compatMode);// 标准模式返回 'CSS1Compat'

        // 返回视口的宽高
        // 返回对象   w h 表示像素值，数字类型
        function getViewportOffset() {
            if(window.innerWidth) {
                return {
                    w: window.innerWidth,  // 包含滚动条的宽度
                    h: window.innerHeight
                }
            }else{
                if(document.compatMode == 'BackCompat'){
                    return {
                        w: document.body.clientWidth,    // 不包含滚动条的宽度
                        h: document.body.clientHeight
                    }
                }else{
                    return {
                        w: document.documentElement.clientWidth,
                        h: document.documentElement.clientHeight
                    }
                }
            }
        }

    </script>
</body>
</html>